<template>
	<view class="content">
		<u-navbar back-text="" slot="center" :autoBack="true" safeAreaInsetTop placeholder>
			<view slot="center" class="leftText dis-row">
				<view class="search">
					  <u-icon name="search" color="#000" size="24"></u-icon>
					  <!-- #ifdef MP-WEIXIN -->
					   <view style="width: 410rpx;padding-top: 7rpx;">
						   <u--input
							v-model="seachParentdata.searchName"
							border="none"
							placeholder="搜索你要找的师傅"
							color="#A1A1A1"
							@blur ="changesInput"
							placeholderStyle="color:rgba(255,255,255,.5)"
							></u--input>
					   </view>
					  <!-- #endif -->
					  <!-- #ifdef MP-ALIPAY || APP-PLUS -->
					   <view style="width: 530rpx;padding-top: 10rpx;">
						   <u--input
							v-model="seachParentdata.searchName"
							border="none"
							placeholder="搜索你要找的师傅"
							color="#A1A1A1"
							@blur ="changesInput"
							placeholderStyle="color:rgba(255,255,255,.5)"
							></u--input>
					   </view>
					  <!-- #endif -->
						 
					</view>
				</view>
		</u-navbar>
		
		<view class="center">
			<view class="filterRight">
				<view @click="cleanAddresIndex()">{{cityName}}<u-icon name="arrow-down" color="#A1A1A1" size="12"></u-icon></view>
				<!-- <view @click="open()">工种<u-icon name="arrow-down" color="#A1A1A1" size="12"></u-icon></view> -->
				<view @click="personopen()">人员构成<u-icon name="arrow-down" color="#A1A1A1" size="12"></u-icon></view>
				<!-- <view>筛选<u-icon name="arrow-down" color="#A1A1A1" size="12"></u-icon></view> -->
			</view>
		</view>
	<!--<view style="height: 20rpx;background-color: black;"></view> -->
		<view class="index">
			<block v-if="cardList && cardList.length>0">
			<scroll-view scroll-y="true" class="scroll-Y">
			  <!--列表部分-->
			  <view class="list-item dis-clm">
			  	<!--list start-->
			  	<block>
			  		<view class="master-block" v-for="(item,index) in cardList" :key="index"  @click="JumpNext(item)">
			  			<view class="master-item">
			  				<view class="master-faceItem poser dis-row">
			  					<!--头像处理start-->
			  					<view class="faceItem-ico poser">
			  						<image :src="item.avatar?item.avatar:'http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/default-avatar.png'"></image>
			  						<label>{{item.staffTypeStr}}</label>
			  					</view>
			  					<!--头像处理over-->
			  					<!--顶部右侧标题文字开始-->
			  					<view class="faceText dis-clm">
			  						<!--置顶信息start-->
			  						<view class="faceText-t1 dis-row">
			  							<view class="zhidding" v-if="item.top">置顶</view>
			  							<view class="master-name">{{item.nickName}}</view>
			  							<block v-if="item.isRealName">
			  								<label><image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/user-real.svg"></image></label>
			  								<text>实名认证</text>
			  							</block>
			  						</view>
			  						<!--置顶信息over-->
			  						<view class="master-userinfo dis-row">
			  							<text v-if="item.gender">
			  								<block v-if="item.gender==1">男</block>
			  								<block v-else-if="item.gender==2">女</block>
			  							</text>
			  							<text v-if="item.age">{{item.age}}岁</text>
			  							<text v-if="item.nation">{{item.nation}}</text>
			  						</view>
			  					</view>
			  					<!--顶部右侧标题文字结束-->
			  					<!--是否在线开始-->
			  					<view class="master-t3 dis-row" v-if="item.status">
			  						<view><label></label></view><text>今日找活中</text>
			  					</view>
			  					<!--是否在线结束-->
			  				</view>
			  				<!--标签列表开始-->
			  				<view class="bloc-small">
			  					<label v-if="item.workYear">{{item.workYear}}工龄</label>
			  					<label v-if="item.workType1">{{item.workType1}}</label>
			  					<label v-if="item.mastery">{{item.mastery}}</label>
			  				</view>
			  				<view class="block-pre" style="color: #A1A1A1;font-size: 28rpx;">{{item.notice}}</view>
			  				<!--标签列表结束-->
			  				<!--底部开始哦-->
			  				<view class="master-zpList dis-clm poser">
			  					<view class="zpList-child dis-row">
			  						<label>期望工种</label><text>{{item.skills?strHandle(item.skills):''}}</text>
			  					</view>
			  					<view class="zpList-child dis-row">
			  						<label>期望地点</label><text>{{item.hopeAddr?strHandle(item.hopeAddr):''}}</text>
			  					</view>
			  					<view class="zpList-right">
			  						<view class="zplistrv-s1" v-if="item.salary"><label>{{item.salary}}</label>{{item.salaryUnit?item.salaryUnit:'元'}}</view>
			  						<view class="zplistrv-s1" v-else><label>面议</label></view>
									<view class="zpList-s2">期望薪资</view>
			  					</view>
			  				</view>
			  				<!--底部结束-->
			  			</view>
			  		</view>
			  	</block>
			  	<!--list over-->
			  	
			  </view>
			</scroll-view>
			</block>
			<block v-else>
				<view class="empty-img">
					<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/icon50.png"></image>
				</view>
			</block>
		</view>
		<u-popup :show="personshow" :round="10" mode="bottom"  @close="personclose" @open="personopen"
		closeIconPos="top-right"
		closeable="true">
			<view class="popOption">
				<view class="title">人员构成</view>
				<view class="option">
					<view
						v-for="(uv,ui) in personList" 
						:key="ui" 
						:class="{'active':staffType === uv.id}" 
						@click="personChange(uv)">{{uv.name}}</view>
				</view>
				<!-- <view class="define">
					<view @click="personDefine()">确定</view>
				</view> -->
			</view>
		</u-popup>
		
		<!--地址-->
		<pop ref="city" :direction="direction" :is_close="true" :is_mask="true" :width="100">
		     <view class="con-del dis-clm" v-if="cityList && cityList.length>0">
				 <view class="cityName">选择地点</view>
				 <view class="cityList dis-row">
				 	<view class="sheng dis-clm">
				 		<scroll-view scroll-y="true">
				 			<view class="sheng-Lst" 
							v-for="(cityitem,cityindex) in provinceList" 
							:key="cityindex" 
							:class="{'shengActive':(cityitem.active==1)}"
							@click="cityClick(cityitem,cityindex,1)"
							>{{cutstr(cityitem.name,10)}}</view>
				 		</scroll-view>
				 	</view>
				 	<view class="shi dis-clm">
						<scroll-view scroll-y="true">
							<view class="shi-lst" v-for="(shiItem,shiIndex) in cityList" 
							:key="shiIndex"
							:class="{'shiActive':(shiItem.active==1)}"
							@click="cityClick(shiItem,shiIndex,2)"
							>{{cutstr(shiItem.name,10)}}</view>
						</scroll-view>
					</view>
				 	<!-- <view class="qu dis-clm">
						<scroll-view scroll-y="true">
							<view class="qu-lst" v-for="(quitem,quindex) in countyList" :key="quindex"
							:class="{'quActive':(quitem.active==1)}"
							@click="cityClick(quitem,quindex,3)"
							>{{cutstr(quitem.name,10)}}</view>
						</scroll-view>
					</view> -->
				 </view>
				 
				<!-- <view class="addres-footer dis-row">
					 <view class="addres-btn" @click="cleanNew">清除</view>
					 <view class="addres-btn" @click="citySure">确定选择</view>
				</view> -->
			 </view>
		</pop>
	</view>
</template>
<script>
	import store from '@/common/store.js'
	import Index from '@/common/index-model.js'
	import pop from "@/components/ming-pop/ming-map.vue"
	let index=new Index();
	export default {
		data() {
			return {
				seachParentdata:{
					cityid:'',
					cityName:'',
					searchName:'',
					
				},
				cardList:[],
				personshow:false,
				personList:[],
				staffType:0,
				cityLists:[],
				provinceList:[],
				cityList:[],
				countyList:[],
				cityName:'地点',
				direction:'below',
			};
		},
		components:{
			pop
		},
		onLoad(opt) {
			this.seachParentdata.cityid = opt.cityid;
			this.seachParentdata.searchName = opt.key;
			this.getSearchList();
			
		},
		onPullDownRefresh() {
			this.getSearchList();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			JumpNext(item) {
				index.navigate_to('../workInfo/RecruitmentInfo?id='+item.id)
			},
			//获取人员构成
			getPersonList() {
				index.getPublicUserMember({},'client/public/find/staff','get',res=>{
					if(res.data.code == 200 && res.data.success){
						this.personList=res.data.result;
					}
				})
			},
			personopen(){
				this.getPersonList();
				this.personshow = true;
			},
			personclose() {
				this.personshow = false
			},
			personChange(item){
				this.staffType=item.id;
				this.getSearchList();
				this.personshow = false
			},
			cleanAddresIndex() {
				this.getCityList();
				this.$refs.city.show();				
			},
			//获取省市区数据列表
			getCityList() {
				index.getPublicUserMember({},'client/public/find/areaList','get',res=>{
					if(res.data.code == 200 && res.data.success){
						let cityList=res.data.result;
						let province=[];
						cityList.forEach((item,index)=>{
							if(item.pid==0){
								item.active=0;
								let city=[];
								cityList.forEach((t,ti)=>{
									if(t.pid==item.id){
										t.active=0;
										let county=[];
										cityList.forEach((th,tc)=>{
											if(th.pid==t.id){
												th.active=0;
												county.push(th);
											}
										})
										t.child=county;
										city.push(t);
									}
								})
								item.child=city;
								province.push(item);
							}
						});
						this.cityLists=province;
						province[0].active=1;
						this.provinceList=province;
						this.cityList=province[0].child;
						this.countyList=province[0].child[0].child;
					}
				})
			},
			cityClick(item,inx,type){
				if(type===1){
					this.cityList=item.child;
					this.countyList=item.child[0].child;
					this.provinceList.forEach((v,i)=>{
						if(v.active==1){
							this.provinceList[i].active=0;
						}
					})
					this.provinceList[inx].active=1;
				}else if(type===2){
					this.seachParentdata.cityid=item.id;
					this.cityName=item.name;
					this.pages=0;
					this.cardList=[];
					this.getSearchList();
					this.$refs.city.close();
					
					this.countyList=item.child;
					let num=0;
					this.cityList.forEach((v,i)=>{
						if(this.cityList[i].active==1){
							num+=1;
						}
					})
					if(num>=3){
						index.show_tips('城市选择不能超过3个');return false;
					}
					this.cityList[inx].active=1;
				}else if(type===3){
					this.countyList.forEach((v,i)=>{
						if(v.active==1){
							this.countyList[i].active=0;
						}
					})
					this.countyList[inx].active=1;
				}
			},
			//清除选中的地址
			cleanNew() {
				this.hopeAddrIds='';
				this.hopeAddrName='';
				this.$refs.city.close()
			},
			citySure(){
				let hopeAddrIds='',hopeAddrName='';
				this.cityList.forEach((v,i)=>{
					if(this.cityList[i].active==1){
						hopeAddrIds+=v.id+',';
						hopeAddrName+=v.name+',';
					}
				})
				if(!hopeAddrIds || !hopeAddrName){
					index.show_tips('请选择省市区')
					return false
				}				
				this.formData.hopeAddrIds=hopeAddrIds;
				this.formData.hopeAddrName=hopeAddrName;
				this.$refs.city.close();
			},
			//输入框查询
			changesInput(e) {
				//console.log(this.seachParentdata.searchName,'===yy=')
				if(this.seachParentdata.searchName == ''){
					index.show_tips('关键字不能为空')
					return false
				}
				this.getSearchList();
			},
			getSearchList(ids,str) {
				let send={
					"word":this.seachParentdata.searchName,
					"cityId":this.seachParentdata.cityid
				}
				if(this.staffType!=0){
					send.staffType=this.staffType;//工种
				}
				if(send.word == ''){
					index.show_tips('请填写搜索关键字')
					return false
				}
				index.getPublicUserMember(send,'/client/recruit/listbyword','post',res=>{
					if(res.data.code == 200 && res.data.success){
				        this.cardList = res.data.result;
						console.log(this.cardList);
					}else{
						index.show_tips(res.data.message)
						return false
					}
				})
			},
			cutstr(str, len) {
				var str_length = 0;
				var str_len = 0;
				var str_cut = new String();
				str_len = str.length;
				for (var i = 0; i < str_len; i++) {
					var a = str.charAt(i);
					str_length++;
					if (escape(a).length > 4) {
						//中文字符的长度经编码之后大于4  
						str_length++;
					}
					str_cut = str_cut.concat(a);
					if (str_length >= len) {
						str_cut = str_cut.concat("...");
						return str_cut;
					}
				}
				//如果给定字符串小于指定长度，则返回源字符串；  
				if (str_length < len) {
					return str;
				}
			},
			strHandle(str,char=','){
				return index.strTrim(str,char);
			}
		}
	}
</script>

<style lang="scss">
@import url("@/static/css/publics.css");
@import url("./index.css");
::v-deep {
  .u-navbar--fixed {	  
	  background: #fff;
    // background-image: linear-gradient(to bottom, #42cdff, #0288ff);
    & > view {
      background: transparent !important;
    }
    .leftText {
      color: #000;
	  position: absolute;
	  left: 100rpx;
    }

	  .search {
		  margin-left: 0rpx;
	    display: flex;
	    background: rgba($color: #E4F0FF, $alpha: 0.3);
	    height: 60rpx;
	    padding: 0 10rpx;
	    border-radius: 8rpx;
	    margin-right: 0rpx;
	    ::v-deep {
	      .u-input {
	        margin: 0 10rpx;
	      }
	    }
	  }

  }
}

.content{
	
}
.center{
	padding: 20rpx 20rpx 0rpx 20rpx;
	margin-bottom: 20rpx;
	background: #fff;
	.filterRight {
	  display: flex;
	  justify-content: space-between;
	  font-size: 24rpx;
	  color: #a1a1a1;
	  padding-bottom: 20rpx;
	  view {
	    display: flex;
	    margin-left: 30rpx;
	    ::v-deep {
	      .u-icon {
	        margin-left: 5rpx;
	      }
	    }
	  }
	}
}

.index {
	padding-bottom: 140rpx;
	.complist{
		background-image: url('')!important;
		background-repeat: no-repeat!important;
		background-position: bottom left!important;
	}
    .list {
      padding: 20rpx 20rpx 0;
	  background: #fff;
	  margin-top: 20rpx;
	  // margin-bottom: 20rpx;
      .title {
        display: flex;
        align-items: center;
        text {
          background: #ff5964;
          color: #fff;
          font-size: 20rpx;
          padding: 8rpx 14rpx;
          border-radius: 8rpx;
        }
        view {
          font-size: 36rpx;
          font-weight: bold;
          // margin-left: 20rpx;
        }
      }
      .cont {
        margin: 20rpx 0;
        font-size: 24rpx;
        color: #424242;
      }
      // .tag {
      //   display: flex;
      //   view {
      //     background: #f7f7f7;
      //     border-radius: 8rpx;
      //     font-size: 28rpx;
      //     padding: 10rpx;
      //     margin-right: 10rpx;
      //     color: #424242;
      //   }
      //   .t1 {
      //     color: #ff5964;
      //   }
      // }
	  .tag {
	    display: flex;
	  		flex-wrap: wrap;
	    view {
	      background: #f7f7f7;
	      border-radius: 8rpx;
	      font-size: 28rpx;
	      padding: 10rpx;
	      margin-right: 10rpx;
	      color: #424242;
	  		  margin-bottom: 10rpx;
	    }
	    .t1 {
	      color: #ff5964;
	    }
	  }
      .info {
        padding-top: 20rpx;
        padding-bottom: 30rpx;
        margin-top: 20rpx;
        align-items: baseline;
        border-top: 0.5px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        .left {
          .top {
            display: flex;
            align-items: center;
            .name {
              color: #0f0f0f;
              font-weight: bold;
            }
            image {
              width: 28rpx;
              height: 28rpx;
			  margin-left: 14rpx;
			  margin-right: 10rpx;
            }
            .authMe {
              color: #a1a1a1;
              font-size: 24rpx;
            }
			.comp {
			  color: #d9a14e;
			  font-size: 24rpx;
			}
          }
          .addr {
            display: flex;
            color: #a1a1a1;
            font-size: 24rpx;
            margin-top: 10rpx;
            ::v-deep {
              .u-icon {
                margin-right: 14rpx;
              }
            }
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          .t1 {
            background: #ddffd5;
            color: #424242;
            font-size: 24rpx;
            border-radius: 24rpx;
            padding: 2rpx 10rpx;
          }
		  .t2 {
		    background: #E4F0FF;
		    color: #424242;
		    font-size: 24rpx;
		    border-radius: 24rpx;
		    padding: 2rpx 10rpx;
		  }
		  .t-textPre{
			  height: 34rpx;
		  }
          .btn {
            height: 60rpx;
            line-height: 60rpx;
            width: 140rpx;
            text-align: center;
            color: #fff;
            border-radius: 8rpx;
            background: #0575ff;
            font-size: 28rpx;
          }
        }
      }
  }
}
</style>